<template>
  <div @click="tapComic" :class="['comic-box',cname]">
		<div class="comic-cover">
			<img v-lazy="comic.image" :key="comic.image" alt="">
		</div>
		<div class="comic-content">
			<p class="comic-title">{{comic.title}}</p>
			<p>{{comic.author}}</p>
			<p>{{comic.category}}</p>
			<p>{{comic.description}}</p>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		cname:{
			type: String,
			default: ''
		},
		comic: {
			type: Object,
			default() {
				return {}
			}
		}
	},
	methods: {
		tapComic(e) {
			if(this.comic) {
				this.$emit('onTapComic', this.comic.cid)
			}
		}
	}
}
</script>
<style lang="scss" scoped>
@import '../../assets/style/color.scss';
.comic-box {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding: 6px;
	border-bottom: 6px solid $color-bg;
	.comic-cover {
		width: 80px;
		height: 106px;
		margin-right: 10px;
	}
	.comic-content {
		-webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 1px;
    font-size: $font-size-14;
    color: $color-text-9;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
		p {
			text-overflow:ellipsis; 
			white-space:nowrap; 
			overflow:hidden; 
			margin-top: 6px;
		}
		.comic-title {
			font-size: $font-size-16;
			font-weight: 600;
			color: $color-text-5;
		}
	}
}
</style>
